<template>
  <div class="FwaiJiaGong">
    <!-- 筛选 --start-->
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="formInline.key" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="formInline.time1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button class="ebtn" type="warning" @click="External">新增外发</el-button>
    </div>
    <!-- 筛选 --end-->
    <div class="FwaiJiaGongList">
      <el-table :data="tableData" height="630px" stripe>
        <el-table-column prop="xuhao" label="序号" width="100px" align="center"></el-table-column>
        <el-table-column prop="logisticsno" label="物流单号" align="center"></el-table-column>
        <el-table-column prop="companyname" label="加工企业" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="kinds" label="加工类型" align="center"></el-table-column>
        <el-table-column prop="fahuodate" label="发货时间" align="center"></el-table-column>
        <el-table-column prop="shouhuodate" label="交货日期" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="states" label="状态" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center" width="240px">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.states =='待收货'"
              @click="Receiving(scope.row.logisticsno,scope.row.companyno)"
            >收货</el-button>
            <el-button
              type="primary"
              size="small"
              @click="Detail(scope.row.logisticsno,scope.row.companyno)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="收货详情"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      width="1000px"
    >
      <div class="color_box"></div>
      <div class="contents">
        <div class="accessories" :v-model="form">
          <div class="accMessage">
            <span class="accspan">企业名称</span>
            <el-input class="wb" v-model="form.companyname"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">&nbsp;&nbsp;&nbsp;收货人</span>
            <el-input class="wb" v-model="form.shouhuoren"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">联系方式</span>
            <el-input class="wb" v-model="form.tel"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">收货地址</span>
            <el-input class="wb" v-model="form.address"></el-input>
          </div>
        </div>
        <div class="accessories">
          <p class="Headline">领料清单</p>
          <el-table :data="tableDatashouh" :max-height="170" stripe>
            <el-table-column prop="xuhao" type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="rawno" label="物料代码" align="center"></el-table-column>
            <el-table-column prop="rawname" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="unit" label="批次号" align="center"></el-table-column>
            <el-table-column prop="fahuonumber" label="发货数量" align="center"></el-table-column>
            <el-table-column prop="shouhuonumber" label="领料数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shouhuonumber"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="accessories">
          <p class="Headline">上传外发表格</p>
          <div class="uplod">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="Btn">
          <el-button type="primary" @click="shouhoBtn">确认</el-button>
          <el-button type="info" @click="dialogVisible=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="详情"
      :modal-append-to-body="false"
      :visible.sync="dialogVisibleXiang"
      width="1000px"
    >
      <div class="color_box"></div>
      <div class="contents">
        <div class="accessories" :v-model="form">
          <div class="accMessage">
            <span class="accspan">企业名称</span>
            <el-input class="wb" v-model="form.companyname"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">&nbsp;&nbsp;&nbsp;收货人</span>
            <el-input class="wb" v-model="form.shouhuoren"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">联系方式</span>
            <el-input class="wb" v-model="form.tel"></el-input>
          </div>
          <div class="accMessage">
            <span class="accspan">收货地址</span>
            <el-input class="wb" v-model="form.address"></el-input>
          </div>
        </div>
        <div class="accessories">
          <p class="Headline">货物信息</p>
          <el-table :data="tableDatahw" :max-height="170" stripe>
            <el-table-column prop="xuhao" type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="rawno" label="物料代码" align="center"></el-table-column>
            <el-table-column prop="rawname" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="logisticsno" label="批次号" align="center"></el-table-column>
            <el-table-column prop="fahuonumber" label="发货数量" align="center"></el-table-column>
            <el-table-column prop="shouhuonumber" label="领料数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.shouhuonumber"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="accessories">
          <p class="Headline">上传外发表格</p>
          <div class="uplod">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="Btn">
          <el-button type="info" @click="dialogVisibleXiang=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增采购弹框 -->
    <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1200px">
      <div class="herd_bud"></div>
      <div class="from_bt">新增外发</div>
      <br />
      <p class="Purchase_Division"></p>
      <br />
      <el-form :model="form" :inline="true" class="demo-form-inline" label-width="100px">
        <el-form-item label="企业名称">
          <el-input v-model="form.companyname"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="form.consignee"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" class="demo-form-inline" label-width="110px">
        <el-form-item label="选择运输方式" style="font-weight: bold;">
          <el-radio-group v-model="radio">
            <el-radio label="快递"></el-radio>
            <el-radio label="物流"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- <p class="Purchase_Division"></p> -->
      <div v-if="radio==='快递'">
        <el-form :model="form" :inline="true" class="demo-form-inline" label-width="80px">
          <el-form-item label="快递公司">
            <el-select v-model="values">
              <el-option
                v-for="item in optionBts"
                :key="item.no"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input v-model="form.Dahao"></el-input>
          </el-form-item>
          <el-button type="primary">增加单号</el-button>
        </el-form>
      </div>
      <div v-if="radio==='物流'">
        <el-form :model="form" :inline="true" class="demo-form-inline" label-width="120px">
          <el-form-item label="快递公司">
            <el-select v-model="values">
              <el-option
                v-for="item in optionBts"
                :key="item.no"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input v-model="formInlineBp.DaHao"></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.carnumber"></el-input>
          </el-form-item>
          <el-form-item label="司机姓名">
            <el-input v-model="form.drivername"></el-input>
          </el-form-item>
          <el-form-item label="司机联系方式">
            <el-input v-model="form.drivertel"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="tow_tab_hed">货物信息</div>
      <br />
      <!-- <p class="Purchase_Division"></p> -->
      <el-table :data="tableDataBy" :height="300" :max-height="380" :v-model="form" stripe>
        <el-table-column label="序号" prop="xuhao" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="物料代码" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rawno"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rawname"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.logisticsno"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="计量单位" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发货数量" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fahuonumber"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <p class="Purchase_Division"></p>
      <br />
      <div class="from_tab_btn">
        <el-button @click="waifyes" type="primary" size="small">确认</el-button>
        <el-button @click="dialogTableVisible = false" type="info" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      radio: "快递",
      tableData: [],
      imageUrl: "",
      imageUrl1: "",
      tableDatashouh: [],
      form: {},
      optionBts: [],
      path: "",
      index: 6,
      tableDatall: [],
      formInline: {
        key: ""
      },
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      dialogVisible: false,
      dialogVisibleExt: false,
      dialogVisibleXiang: false,
      a: "",
      b: "",
      logisticsno: "",
      companyno: "",
      dialogTableVisible: false,
      form: {},
      tableDataBy: [{
        xuhao:"1"
      }],
      values: "",
      tableDatahw: [],
    };
  },
  created() {
    this.getlist(0);
    this.Getlist();
    this.getDataTans();
  },
  methods: {
    // 收货
    Receiving(a, b) {
      this.dialogVisible = true;
      console.log(a);
      console.log(b);
      var obj = {
        logisticsno: a,
        companyno: b
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/Det?index=6&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var xqlist = JSON.parse(datas.string.__text);
        console.log(xqlist, "shuju");
        this.form = xqlist.mes;
        this.tableDatashouh = xqlist.goods;
      });
    },
    // 收货确认
    shouhoBtn() {
      var obj = {
        logisticsno: this.logisticsno,
        path: this.imageUrls,
        goods: [
          {
            rawno: this.tableDatashouh[0].rawno,
            shouhuonumber: this.tableDatashouh[0].shouhuonumber
          }
        ]
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/Save?index=6&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("收货成功");
          this.dialogVisible=false
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    },
    External() {
      // this.dialogVisibleExt = true;
      this.dialogTableVisible = true;
    },
    // 详情弹框显示及渲染
    Detail(a, b) {
      this.dialogVisibleXiang = true;
      console.log(a);
      console.log(b);
      var obj = {
        logisticsno: a,
        companyno: b
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/Det?index=6&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var xqlist = JSON.parse(datas.string.__text);
        console.log(xqlist, "shuju");
        this.form = xqlist.mes;
        this.tableDatahw = xqlist.goods;
      });
    },
    handleAvatarSuccess(res, file) {
      // var datas = this.$x2js.xml2js(res);
      this.imageUrls = datas.UpFileReturn.url;
      this.imageUrl = datas.UpFileReturn.fullurl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      // var datas = this.$x2js.xml2js(res);
      this.imageUrl1s = datas.UpFileReturn.url;
      this.imageUrl1 = datas.UpFileReturn.fullurl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      return isJPG && isLt2M;
    },
    // 列表
    getlist(page) {
      var obj = {
        start: this.start,
        end: this.end,
        key: this.formInline.key,
        pn: page,
        PerPageSize: 10
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("字符串");
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.tableData = list;
        for (var i = 0; i < list.length; i++) {
          var dd = new Date(parseInt(list[i].fahuodate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].fahuodate = y + "-" + m + "-" + d + " ";
          list[i].xuhao = 1 + i + 10 * page;
        }
        for (var i = 0; i < list.length; i++) {
          var dd = new Date(parseInt(list[i].shouhuodate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].shouhuodate = y + "-" + m + "-" + d + " ";
        }
      });
    },
    Getlist() {
      var obj = {
        start: "",
        end: "",
        key: this.formInline.key,
        pn: 0,
        PerPageSize: 10000
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/List?index=" +
          this.index +
          "&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.total = list.length;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    // 日期改变
    chage(e) {
      console.log("e");
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      console.log("e");
      this.getlist(0);
    },
    // 新增外发保存
    waifyes() {
      
      var obj = {
        'mess': {
          logisticsno:this.form.DaHao,
          companyname: this.form.companyname,
          isdelete: false
        },
        'list': this.tableDataBy
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/Save?index=60&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("字符串");
        console.log(datas);
        if (datas.string.__text == "SUCCESS") {
          this.$message.success("外发新增成功！");
          this.dialogTableVisible=false
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    },
    quxiao_10() {
      this.dialogVisibleXiang = false;
    },
    //快递公司接口
    getDataTans() {
      axios("/apis/CommondMethod.asmx/DropDown?index=1&member=快递公司").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.optionBts = list;
        }
      );
    },
    getDataBys() {}
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.FwaiJiaGong {
  width: 98%;
  // height: 500px;
  margin-top: 20px;
}
.FwaiJiaGongList {
  width: 98%;
  margin-top: 20px;
  margin-left: 15px;
  // margin: 0 auto;
  background-color: $white;
  border: 1px solid $linecolor;
}
.accessories {
  width: 99%;
  // border: 1px solid #000;
}
.Btn {
  text-align: center;
  margin-top: 10px;
  // border: 1px solid #000;
}

.accMessage {
  width: 35%;
  height: 45px;
  // border: 1px solid #000;
  display: inline-block;
  margin-left: 10px;
  // margin-top: 5px;
}
.wb {
  width: 80%;
  float: right;
}
.accspan {
  line-height: 50px;
}
.Headline {
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  // border: 1px solid #000;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.accMessage {
  width: 30%;
  height: 50px;
  // border: 1px solid #000;
  display: inline-block;
  margin-left: 10px;
}
.wb {
  width: 78%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  // border: 1px solid #000;  //
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 74px;
  height: 74px;
  line-height: 74px;
  text-align: center;
}
.avatar {
  width: 74px;
  height: 74px;
  display: block;
}
.uplod {
  width: 8%;
  height: 75px;
  margin-left: 20px;
  // border: 1px solid #000;
}
.expressinput {
  margin-top: 5px;
  // border: 1px solid #000;
}
.radioMessage {
  width: 31%;
  display: inline-block;
  // border: 1px solid #000;
}
.radioinput {
  width: 68%;
}
.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  width: 97.5%;
  margin-left: 15px;
}
.ebtn {
  float: right;
  margin-right: 20px;
  // margin-top: -63px;
}
.pgnt {
  text-align: center;
}
.demo-form-inline {
  display: inline-block;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
  font-weight: bold;
}
.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(52, 144, 231);
}
.from_tab_btn {
  text-align: center;
}
</style>